<template>
<div>
    <div class="message">
        <Top title="资讯详情" iconShow="1"></Top>
        <div class="message-content">
            <h1 class="message-content-title">{{content.title}}</h1>
            <p class="message-content-time">
                <!-- <span>{{content.author}}</span>
                <span>{{content.createTime}}</span> -->
                <span class="message-content-time-name">{{content.author}}</span>
                <span class="message-content-time-time">{{content.createTime | formatDate1}}</span>
                <span class="message-content-time-view">{{content.readsCount}}</span>
            </p>
            <div class="message-content-word">
                <div style="width:100%">
                    <img :src="content.titleImg" alt="" style="width:100%;height:auto;line-break:auto">
                </div>
                <!-- <div>{{content.detail}}</div> -->
                <div v-for="(item,index) in content.detail" :key="index">{{item}}</div>
            </div>
            <ul class="opare-group">
              <li v-if="isPraise" class="opare-group-zaned">{{content.favorCount}}</li>
              <li v-else @click="praise"  class="opare-group-zan">{{content.favorCount}}</li>
              <li v-if="isCollect" class="opare-group-shoued">{{content.collectCount}}</li>
              <li v-else @click="collect" class="opare-group-shou">{{content.collectCount}}</li>
            </ul>
        </div>
    </div>
    <!-- 引用相关推荐模块 -->
    <!-- <recommend></recommend> --> 
    <div class="recommend">
        <div class="recommend-title">
              <span>一 产品推荐 一</span>
              <a href="/loan/index.html"><span class="recommend-title-right">更多推荐<i class="iconfont icon-jiankuohaoxiyou"></i></span>       </a>
        </div>
        <div class="recommend-content clearfix">   
            <ul>
              <li v-for="(item,index) in recommendList" :key="index" @click="goDetail(item.platformId,index)">
                <div class="recommend-content-log">
                   <img :src="item.logo"  alt="贷款">
                </div>
                <p class="recommend-content-title">{{item.abbreviation}}</p>
                <div class="recommend-content-memoy">
                   <p><span>¥</span><span>{{item.quato}}</span></p>
                   <span class="recommend-content-memoy-range">额度范围&nbsp;(元)</span>
                </div>
                <div class="recommend-content-apply">
                    立即申请
                </div>
              </li>
            </ul>
        </div>
    </div>
     <div class="messagess">
        <div class="messagess-title">
              <span>一 资讯推荐 一</span>
                <a href="/news/page.html"> <span class="messagess-title-right">更多推荐<i class="iconfont icon-jiankuohaoxiyou"></i></span></a>
        </div>
        <div class="messagess-content clearfix">
            <ul>
              <li v-for="(item,index) in messagessList" :key="index" @click="message(item.cmsId)">
                <div class="messagess-content-image">
                   <img :src="item.img"  alt="贷款">
                </div>
                <p>{{item.title}}</p>
              </li>
            </ul>
        </div>
  </div>
</div>
</template>

<script>
import Vue from "vue";
import "../../../js/lib/flexble.js";
import util from "../../../js/lib/util.js";
import commons from "../../../common/js/common.js";
import Top from "components/Header/Header";
import Foot from "components/Footer/Footer";
import { MessageBox, Indicator } from "mint-ui";
export default {
  name: "bbsArticle",
  components: { Top, Foot },
  data() {
    return {
      isPraise: false,
      isCollect: false,
      id: "",
      content: {},
      recommendList: [],
      messagessList: [],
      token: ""
    };
  },
  filters: {
    formatDate1(time) {
      return commons.formatDate1(time);
    }
  },
  mounted() {
    Vue.http.interceptors.push((request, next) => {
      //请求拦截器
      //请求前
      request.headers.set("token", commons.getCookie("token")); //设置请求头
      Indicator.open("加载中..."); //请求loading
      next(response => {
        //请求后
        Indicator.close(); //隐藏loading
        return response;
      });
    });
    var id = commons.getParameter("id");
    this.message(id);
  },
  methods: {
    zixunList(id) {
      this.$http
        .get(
          "/loansupermarket-app/information/getInformationMoreList?cmsId=" + id
        )
        .then(response => {
          var resBody = response.body;
          if (resBody.code == "000") {
            // 如果接口请求成功列表实例化
            this.messagessList = resBody.data;
          } else {
            MessageBox.alert(resBody.mesg);
          }
        });
    },
    goDetail(id, index) {
      //这个是产品相关推荐
      this.$http
        .post("/loansupermarket-app/platform/visitCount", {
          token: this.token,
          starPlatformId: index + 1,
          phone: window.sessionStorage.getItem("phone"),
          channel: window.sessionStorage.getItem("channel")
            ? window.sessionStorage.getItem("channel")
            : ""
        })
        .then(() => {
          //location.href = `${commons.paths}/loan/product.html?id=${id}&status=2`;
           //注意这个请求是为后面的我的足迹中的产品添加记录
            this.$http.post('/loansupermarket-app/foot/insertInformationVisit',{token:commons.getCookie('token'),visitType:3,informationId:id}).then(()=>{
                location.href = `${commons.paths}/loan/product.html?id=${id}&status=2`;
            }); 
        });
    },
    newscount(id) {
      //表示用来更新数据
      let token = commons.getCookie("token");
      let postData = {
        visitType: 1,
        informationId: id,
        token: token,
        channel: window.sessionStorage.getItem("channel")
          ? window.sessionStorage.getItem("channel")
          : ""
      };
      this.$http
        .post(
          "/loansupermarket-app/information/insertInformationVisit",
          postData
        )
        .then(function(response) {});
    },
    message(id) {
      //window.pageYOffset=0
      let vm = this;
      this.id = id;
      this.$http
        .get("/loansupermarket-app/index/getCmsDesc?cmsId=" + id)
        .then(response => {
          var resBody = response.body,
            code = resBody.code,
            content = resBody.data;
          if (code == "000") {
            this.recommendList = content.productList; //产品
            this.messagessList = content.informationMoreList; //资讯
            this.content = content;
            this.content.detail = this.content.detail.split("\n");
            document.title = content.title + "-水珠钱包";
            // 是否收藏接口
            if (content.isCollect == 1) {
              vm.isCollect = true;
            } else {
              vm.isCollect = false;
            }
            // 是否点赞接口
            if (content.isFavor == 1) {
              vm.isPraise = true;
            } else {
              vm.isPraise = false;
            }
          } else {
            MessageBox.alert(resBody.mesg);
          }
        });

      //在这里触发更新咨询推荐列表
      this.zixunList(id);
      //调用下咨询的
      this.newscount(id);
      document.body.scrollTop = 0;
    },
    // 点赞
    praise() {
      let messageId = this.id;
      this.$http
        .post("/loansupermarket-app/favor/insertInformationFavor", {
          token: commons.getCookie("token"),
          visitType: 1,
          informationId: messageId
        })
        .then(function(response) {
          var resBody = response.body,
            { code, data } = resBody;
          if (code == "000") {
            this.isPraise = true;
            this.content.favorCount = data;
          } else {
            MessageBox.alert(resBody.mesg);
          }
        });
    },
    // 收藏
    collect() {
      let messageId = this.id;
      this.$http
        .post("/loansupermarket-app/collect/insertInformationVisit", {
          token: commons.getCookie("token"),
          visitType: 1,
          informationId: messageId
        })
        .then(function(response) {
          var resBody = response.body,
            { code, data } = resBody;
          if (code == "000") {
            this.isCollect = true;
            this.content.collectCount = data;
          } else if (code == "444") {
            location.href = `${commons.paths}/user/login.html?history=1`;
          } else {
            MessageBox.alert(resBody.mesg);
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../scss/base.scss";
.opare-group {
  @include flexContainer;
  justify-content: flex-end;
  font-size: 0.35rem;
  color: $iconColor;
  li {
    min-height: 0.8rem;
    @include flexItem;
    background-size: 0.6rem;
    text-indent: 0.7rem;
  }
  @mixin operabg($url) {
    background: url($url) no-repeat 0 -3px;
  }
  &-zan {
    @include operabg("../../../assets/icon/dianzan.png");
  }
  &-zaned {
    // @include operabg($url+"/static/img/yidianzan.png");
    @include operabg("../../../assets/icon/yidianzan.png");
  }
  &-shou {
    @include operabg("../../../assets/icon/guanzhu.png");
  }
  &-shoued {
    @include operabg("../../../assets/icon/yiguanzhu.png");
  }
}
.message {
  margin-top: 1.2rem;
  text-align: left;
  &-content {
    word-wrap: break-word;
    box-sizing: border-box;
    padding: 0 0.4rem 0.4rem 0.4rem;
    background-color: #fff;
    margin-bottom: 0.8rem;
    &-title {
      font-size: 0.5rem;
      padding-top: 0.2rem;
      margin-top: 0.2rem;
      margin-bottom: 0.2rem;
    }
    &-word {
      font-size: 0.35rem;

      img {
        margin-top: 0.35rem;
      }
      color: #5d5d5d;
      line-height: 0.58rem;
    }
    &-time {
      // span:nth-of-type(1) {
      //   color: #000;
      //   padding-right: 0.2rem;
      //   height: 0.35rem;
      //   line-height: 0.35rem;
      //   display: inline-block;
      // }
      // span:nth-of-type(2) {
      //   margin-left: 0.1rem;
      // }
      $wh: 0.7rem;
      margin-top: 0.3rem;
      @include flexContainer;
      justify-content: start;
      color: $iconColor;
      span {
        @include flexItem;
      }
      &-name {
        @include textAlign($wh);
        margin-right: 0.2rem;
        color: $navColor;
        text-indent: 0.2rem;
      }
      &-time {
        @include textAlign($wh);
        margin-right: 0.2rem;
      }
      &-view {
        @include textAlign($wh);
        background: url("../../../assets/icon/liulanliang@2x.png") no-repeat 0
          0.15rem;
        background-size: 0.4rem;
        text-indent: 0.5rem;
      }
      font-size: 0.35rem;
    }
  }
}
.recommend {
  padding: 0px rem(30);
  &-title {
    position: relative;
    box-sizing: border-box;
    margin-bottom: rem(30);
    font-size: rem(32);
    font-weight: bold;
    color: #333333;
    &-right {
      position: absolute;
      right: 0px;
      font-weight: normal;
      color: #00dada;
      font-size: rem(26);
    }
  }
  &-content {
    //margin-top:1rem;
    box-sizing: border-box;
    li {
      position: relative;
      box-sizing: border-box;
      width: rem(330);
      height: rem(300);
      background: white;
      float: left;
      margin: 0.6rem 3px;
      border-radius: 8px;
      .recommend-content-log {
        position: absolute;
        top: -0.75rem;
        left: 50%;
        margin-left: -0.75rem;
        border-radius: 50%;
        width: 1.5rem;
        height: 1.5rem;
        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .recommend-content-title {
        margin-top: 0.8rem;
        font-size: rem(30);
        color: #333333;
      }
      .recommend-content-memoy {
        p {
          margin: rem(10) 0px;
          font-size: rem(40);
          color: #ff5b52;
          span:nth-of-type(1) {
            padding-right: 2px;
            font-size: rem(30);
          }
        }
        &-range {
          font-size: rem(24);
          color: #999999;
        }
      }
      .recommend-content-apply {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: rem(70);
        font-size: 0.42rem;
        background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff) !important;
        box-shadow: 0 -6px 6px rgba(255, 255, 255, 0.6);
        color: #fff;
        line-height: rem(70);
        border-radius: 0 0 8px 8px;
        &:active {
          background: #46d7db;
        }
      }
    }
  }
}
.messagess {
  padding: 0px rem(30);
  &-title {
    position: relative;
    box-sizing: border-box;
    margin-bottom: rem(20);
    font-size: rem(32);
    font-weight: bold;
    color: #333333;
    &-right {
      position: absolute;
      right: 0px;
      font-weight: normal;
      color: #00dada;
      font-size: rem(26);
    }
  }
  &-content {
    li {
      width: rem(330);
      height: rem(280);
      float: left;
      margin: 0 3px 0.5rem 3px;
      //background:white;
      .messagess-content-image {
        width: rem(330);
        height: rem(236);
        img {
          border-radius: 8px;
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      p {
        margin-top: 4px;
        text-align: left;
        font-size: rem(28);
        color: #333333;
        // 表示的意思的如果文字超过了一行的话，就省略...
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
